<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内容页</title>
		<link rel="stylesheet" href="./Public/Home/bootstrap-3.3.5-dist/css/bootstrap.min.css" />
		<script type="text/javascript" src='./Public/Home/jquery.min.js'></script>
		<script type="text/javascript" src='./Public/Home/bootstrap-3.3.5-dist/js/bootstrap.min.js'></script>
		<link rel="stylesheet" href="./Public/Home/css/index.css" />
		<link rel="stylesheet" href="./Public/Home/css/content.css" />
		<script type="text/javascript" src='./Public/Home/jquery.spinner.js'></script>
		<script type="text/javascript" src='./Public/Home/js/index.js'></script>
		<style type="text/css">
		.kuai{
			width: 224px;
			height: 214px;
			background: white;
			opacity: 0.5;
			position: absolute;
			left: 0px;top: 0px;
			display:none;
		}
		.aright {
			width: 450px;
			height: 430px;
			position: absolute;left: 528px;top: 0;
			overflow: hidden;
			display: none;
			z-index: 300;
			background: red;
		}
		.biger{
			position: absolute;
			left: 0;
			top: 0;
		}
		.shopshow .right .size .orangebor{
			border: 1px solid orange;
			
		}
		
		</style>
		<script type="text/javascript" src='js/index.js'></script>
	</head>
	<body>
		{{include file="VIEW_PATH/Common/header.php"}}
		<!--内容页开始-->
		<div class="_w100">
			<div class="address _container">
				<li>您当前位置</li>
				<li><a href="">首页 </a><span class="glyphicon glyphicon-menu-right"></span></li>
				<li><a href="">鞋靴&nbsp;<span class="glyphicon glyphicon-menu-right"></span></li>
				<li><a href="">女鞋&nbsp;<span class="glyphicon glyphicon-menu-right"></span></li>
				<li><a href="">女士靴子&nbsp;</a><span class="glyphicon glyphicon-menu-right"></span></li>
				<li><a href="">短靴&nbsp;</a><span class="glyphicon glyphicon-menu-right"></span></li>
				<li> {{$glData['gname']}}</li>
			</div>
		</div>
		<!--商品展示-->
		<div class="_w100">
			<div class="shopshow _container" style="position: relative;">
				
				<div class="aright">
					{{foreach from="$glData['gdpics']" value="$v"}}
					<img src="{{$v}}" class="biger"  style="width:200%;height: 200%;"/>
					{{endforeach}}
				</div>				
				<div class="left fl" style="position: relative;">
					<script type="text/javascript">					
						$(function(){
							//图片切换
							$('.con').hover(function(){
								var url = $(this).attr('src');
								$('.conm').attr('src',url);
								$('.biger').attr('src',url);
							})
							//放大镜							
							$('.cover').mousemove(function(e){
								
								$('.kuai').css({'display':'block'});
								$('.aright').css({'display':'block'});								
								// 事件对象
								var ev = e || window.event;
								// 鼠标的位置
								var l = ev.offsetX||ev.layerX;
								var t = ev.offsetY||ev.layerY;
								//document.title = l+'|'+t;
								// 色块的位置
								var left = l-112;
								var top = t-107;
								// 色块的范围
								if(left<=0){
									left=0;
								}
								if(left>=224){
									left=224;
								}
								if(top<=0){
									top=0;
								}
								if(top>=214){
									top=214;
								}
								// 给小色块赋值
								$('.kuai').css({'left':left + 'px','top':top + 'px'});								
								// 给右侧图片赋值
								$('.biger').css({'left':left*-2+'px','top':top*-2+'px'});

								
							})
							//鼠标移出的时候
							$('.cover').mouseout(function(){
								$('.kuai,.aright').css({'display':'none'});
							})
						})
					</script>
					
					<div class="img" style="position: relative;">
						<a href="" >
							{{foreach from="$glData['gdpics']" value="$v"}}
							<img src="{{$v}}" alt="" style="position: absolute;" class="conm"/>
							{{endforeach}}
							<div class="cover" style="width: 448px;height: 428px;
								background: greenyellow;opacity: 0;position: absolute;left: 0;top: 0;z-index: 200;">
								
							</div>
							<div class="kuai"></div>
							
						
						</a>
					</div>
					<div class="pic_list">
						{{foreach from="$glData['gdpics']" value="$v"}}
						<li><img src="{{$v}}" alt="" / style="width: 100% height:100%;cursor: pointer;" class="con"></li>
						{{endforeach}}
					</div>
				</div>
				<div class="right fl" style="position: relative;">
					<h4>{{$glData['gname']}}</h4>
					<div class="shopper">
							<span class="glyphicon glyphicon-home"></span>&nbsp;<a href="">百丽旗舰店</a>
					</div>
					<p class="price"><span class="old">￥{{$glData['shopprice']}}</span><span class="new">￥{{$glData['mkprice']}}</span><span class="des">不支持试用优惠券</span></p>
					<p class="time">
						<span>限时抢</span>
						<span>还剩
							<span class="day">5</span>天
							<span>4</span>小时<span>28</span>分<span>52</span>秒
						</span>
						<a href="">全部商品分类<span class="glyphicon glyphicon-menu-right"></span><span class="glyphicon glyphicon-menu-right"></span></a>
					</p>
					<p class="math">
						<span>商品评分:	
							<span class="glyphicon glyphicon-star-empty"></span>
							<span class="glyphicon glyphicon-star-empty"></span>
							<span class="col">7.9分</span>&nbsp;&nbsp;&nbsp;
							<span><a href="">已有{{$glData['clickrate']}}人评论</a></span>
						</span> 
					</p>
					<div class="mor" style="width: 145px;position: absolute;right: 20px;">
						<span>商品编号：{{$glData['gnum']}}</span>
						<a href=""> 更多{{$glData['gname']}}>> </a>
					</div>


				
				<form action="{{U('Refer/index')}}" method="post" name="buy" id="buy">					
					<div class="buy" style="padding-top: 15px;background: #FFFDF4;">
						
						{{foreach from="$attr" key="$k" value="$v"}}
						<div class="size" style="margin-top: 15px;">
							
							<li style="border: none;">{{$v['tname']}}:</li>
							{{foreach from="$v['tavalue']" value="$vv"}}
							<li comb="{{$vv['gaid']}}" class="choose choose{{$k}}" style="cursor: pointer;padding-left: 3px;padding-right: 3px;">{{$vv['gvalues']}}</li>
							{{endforeach}}
							{{if value="$v['tname']=='尺码'"}}
							<li class="lasted fr">
								<a href="">尺码对照表	
									<span class="glyphicon glyphicon-menu-right"></span>	
									<span class="glyphicon glyphicon-menu-right"></span>
								</a>
							</li>
							{{endif}}
						</div>
						{{endforeach}}				

						<div class="dv" style="width: 300px;">
							<div class="decres" >-</div>
							<input type="text" class="count" name="num" value="1" style="display: block;width: 26px;height: 24px;float: left;text-indent: 8px;font-size: 16px;border: 1px solid #8C8C8C;margin-left: 5px;margin-right: 5px;"/> 
							<div class="incres" >+</div>
							<div class="already" style="width: 200px;">
								您已选择：<span class="orange first" id="fir"></span>&nbsp;&nbsp;
										 <span class="orange second" id="sec"></span>
										 <input type="hidden" name="size" class="first" value=""/>
										 <input type="hidden" name="color" class="second" value=""/>
										 <input type="hidden" name="gnum" value="{{$glData['gnum']}}"/>
										 <input type="hidden" name="gid" value="{{$glData['gid']}}" id="gid"/>
										 <input type="hidden" name="shopprice" value="{{$glData['shopprice']}}"/>
										 <input type="hidden" name="gname" value="{{$glData['gname']}}"/>
										 <input type="hidden" name="colorid" class="colorid" value=""/>
										 <input type="hidden" name="sizeid" class="sizeid" value=""/>
							</div>
						</div>
						<style type="text/css">
						    .dv{width: 240px;height:25px;position: relative;margin-top: 18px;}
							.spinner{width: 90px;height:25px;float: left;}
							.decres{
								display: block;width: 25px;height: 25px;float: left;
								padding: 5px;line-height: 10px;font-size: 28px;
								text-indent: 2px;cursor: pointer;
								border: 1px solid #CCCCCC;
								}
							.incres{
								display: block;width: 25px;height: 25px;
								float: left;padding: 3px;line-height: 12px;font-size: 18px;
								text-indent: 2px;cursor: pointer;
								border: 1px solid #CCCCCC;
								}
							.already{width: 140px;height: 25px;float: left;margin-left: 10px;line-height: 25px;}
							.orange{color: orangered;font-weight: 700;font-size: 14px;}
							.go{position: relative;}
							.once{position: absolute;left: 0px;top: 0px;}
							.spcart{position: absolute;left: 120px;top: 0px;}
						</style>
						<!--购物车加减数量结束-->
						
						<div class="go">
							<button class="btn btn-danger btn-lg once">立刻购买</button>
							<a href="javascript:;" class="gosp"><input type="button" value="加入购物车" class="spcart" style="width: 120px;height: 45px;background: #45B1F0;font-size: 18px;color: white;border-radius: 5px;"/></a>
							<p class="wx fr">
								<a href="">扫二维码下载APP	</a>
								<span class="glyphicon glyphicon-triangle-bottom"></span>	
							</p>
						</div>
					</div>
				</form>
				</div>
				
			</div>
		</div>
	<!--用户浏览-->	
	<div class="_w100">
		<div class="see _container">
			<ul class="shoot_pic _container">
				<p class="sp">购买本产品的用户还购买了</p>
				<li>
					<div class="img"><a href=""><img src="./Public/Home/images/see_1.jpg" alt="" /></a></div>
					
					<p><a href=""> Belle/百丽黑色小牛皮皮女低靴冬季3N347DD4</a></p>
					<p><span class="now">￥459</span>&nbsp;&nbsp;<span class="old">￥1368</span></p>			
				</li>
				<li>
					<div class="img"><a href=""><img src="./Public/Home/images/see_1.jpg" alt="" /></a></div>
					
					<p><a href=""> Belle/百丽黑色小牛皮皮女低靴冬季3N347DD4</a></p>
					<p><span class="now">￥459</span>&nbsp;&nbsp;<span class="old">￥1368</span></p>			
				</li>
				<li>
					<div class="img"><a href=""><img src="./Public/Home/images/see_1.jpg" alt="" /></a></div>
					
					<p><a href=""> Belle/百丽黑色小牛皮皮女低靴冬季3N347DD4</a></p>
					<p><span class="now">￥459</span>&nbsp;&nbsp;<span class="old">￥1368</span></p>			
				</li>
				<li>
					<div class="img"><a href=""><img src="./Public/Home/images/see_1.jpg" alt="" /></a></div>
					
					<p><a href=""> Belle/百丽黑色小牛皮皮女低靴冬季3N347DD4</a></p>
					<p><span class="now">￥459</span>&nbsp;&nbsp;<span class="old">￥1368</span></p>			
				</li>
				<li>
					<div class="img"><a href=""><img src="./Public/Home/images/see_1.jpg" alt="" /></a></div>
					
					<p><a href=""> Belle/百丽黑色小牛皮皮女低靴冬季3N347DD4</a></p>
					<p><span class="now">￥459</span>&nbsp;&nbsp;<span class="old">￥1368</span></p>			
				</li>
			</ul>
			<div class="left">	<span class=" glyphicon glyphicon-menu-left"></span>	</div>
			<div class="right">	<span class=" glyphicon glyphicon-menu-right"></span>	</div>
		</div>
	</div>
	<!--商品详情-->	
	<div class="_w100">
		<div class="shop_detail _container" style="width: 1190px;margin: 0 auto;margin-top: 35px;">
			<p class="wd">商品详情</p>
			<div class="tp">
				{{$glData['gdetails']}}
			</div>
		
		</div>
	</div>
	{{include file="VIEW_PATH/Common/bottom.php"}}
	
	       <div class="modal hide fade">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		        <h3>对话框标题</h3>
		      </div>
		      <div class="modal-body">
		        <p>One fine body…</p>
		      </div>
		      <div class="modal-footer">
		        <a href="#" class="btn">关闭</a>
		        <a href="#" class="btn btn-primary">Save changes</a>
		      </div>
		    </div>
	<!--点击加入购物车的弹出框-->
	<div class="modal fade" id="myModal" tabindex="-1">
		<div class="modal-dialog modal-default">
			<div class="modal-content">
				<div class="modal-header">
					<button class="close" data-dismiss="modal"><span>&times;</span></button>
					<h3 class="modal-title">
						该商品成功加入购物车!
					</h3>
				</div>
				<div class="modal-body">				
						<ul class="list-group">
						  <li class="list-group-item"  style="letter-spacing: 2px;font-size: 16px;">
						    <span class="badge" id="count"></span>
						    您选购的商品总数量是：
						  </li>
						  <li class="list-group-item"  style="letter-spacing: 2px;font-size: 16px;">
						    <span class="badge" id="money"></span>
						    您选购的商品总价为：
						  </li>
						</ul>
				</div>
				<div class="modal-footer">
					<a href="{{U('Indent/index')}}" class="btn btn-danger">
						去结算
					</a>
					<a href="" class="btn btn-success">
						继续购物
					</a>
				</div>
			</div>
		</div>

	</div>

	<script type="text/javascript"> 
		//添加到购物车异步提交路径
		var addcart_path = "{{U('Content/addcart')}}";	
		//内容页点击规格异步查询货品
		var goodsquery_path = "{{U('Content/goodsquery')}}";	
		//点击加号异步查询库存提交路径
		var numquery_path = "{{U('Content/numquery')}}";
	</script>
						
	
	
	
	
		
	</body>
</html>
